<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EventSphere</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h1 class="mt-5">EventSphere Host</h1>
        <a class="btn btn-primary mb-3" href="{{ url_for('add_event') }}">Add Event</a>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Date</th>
                    <th>Location</th>
                    <th>Latitude</th>
                    <th>Longitude</th>
                    <th>Category</th>
                    <th>Ticket Type</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for event in events %}
                <tr id="event-{{ event.id }}">
                    <td>{{ event.id }}</td>
                    <td>{{ event.event_name }}</td>
                    <td>{{ event.event_date }}</td>
                    <td>{{ event.location }}</td>
                    <td>{{ event.latitude }}</td>
                    <td>{{ event.longitude }}</td>
                    <td>{{ event.category_name }}</td>
                    <td>{{ event.ticket_name }} ({{ event.ticket_price }})</td>
                    <td>
                        <a href="{{ url_for('edit_event', event_id=event.id) }}" class="btn btn-secondary btn-sm">Edit</a>
                        <button class="btn btn-danger btn-sm" onclick="deleteEvent({{ event.id }})">Delete</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <script>
        // 删除事件的AJAX请求
        function deleteEvent(eventId) {
            if (confirm('Are you sure you want to delete this event?')) {
                $.ajax({
                    url: '/delete_event/' + eventId,
                    type: 'POST',
                    success: function(response) {
                        if (response.status === 'success') {
                            $('#event-' + eventId).remove();  // 删除对应的行
                            alert(response.message);  // 提示删除成功
                        } else {
                            alert('Error: ' + response.message);  // 提示删除失败
                        }
                    },
                    error: function() {
                        alert('An error occurred while deleting the event.');
                    }
                });
            }
        }
    </script>
</body>
</html>
